<template>
	<div>
		<u-popup v-model="show" mode="bottom" border-radius="30" height="95%" @close="cancel" z-index="9999" :safe-area-inset-bottom="true">
      <div class="top flex">
        <u-icon class="icon" name="arrow-down" size="32" @click="cancel"></u-icon>
				<scroll-view class="tags" scroll-x="true">
					<div class="tags-box flex">
						<span class="tag" :class="tagIndex==index && 'on'" v-for="(item, index) in filters" :key="index" @click="tagSwitch(index)">{{ item.filter_title }}</span>
					</div>
				</scroll-view>
      </div>
			<scroll-view class="content" scroll-y="true">
				<!-- 时间范围 -->
				<div class="card">
					<div class="title">时间范围<span class="subtitle">单选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.date_type==item.value && 'on'" v-for="item in timeOptions" :key="item.value" @click="radioChange(item,'date_type')">
							{{ item.label }}
						</span>
					</div>
					<div class="vals timepicker flex" v-if="params.date_type==6">
						<span class="val w50" @click="startTime=true">{{!params.date_time[0]?"开始时间":params.date_time[0]}}</span>~<span class="val w50" @click="endTime=true">{{!params.date_time[1]?"结束时间":params.date_time[1]}}</span>
					</div>
					<u-picker mode="time" v-model="startTime" :params="timeparams" @confirm="startTimeConfirm"></u-picker>
					<u-picker mode="time" v-model="endTime" :params="timeparams" @confirm="endTimeConfirm"></u-picker>
				</div>
				<!-- 倾向性 -->
				<div class="card">
					<div class="title">倾向性<span class="subtitle">多选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.sentiment.includes(item.value) && 'on'" v-for="item in tendOptions" :key="item.value" @click="checkedChange(item, 'sentiment', 3)">{{ item.label }}</span>
					</div>
				</div>
				<!-- 媒体类型 -->
				<div class="card">
					<div class="title">媒体类型<span class="subtitle">多选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.filter_media.includes(item.value) && 'on'" v-for="item in mediaOptions" :key="item.value" @click="checkedChange(item, 'filter_media', 11)">{{ item.label }}</span>
					</div>
				</div>
				<!-- 重点媒体 -->
				<div class="card">
					<div class="title">重点媒体<span class="subtitle">多选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.filter_channel.includes(item.value) && 'on'" v-for="item in channelOptions" :key="item.value" @click="checkedChange(item, 'filter_channel', 99)">{{ item.label }}<br>{{ !mediaCount[item.label]?0:mediaCount[item.label] }}</span>
					</div>
				</div>
				<!-- 文章类型 -->
				<div class="card">
					<div class="title">文章类型<span class="subtitle">多选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.filter_type.includes(item.value) && 'on'" v-for="item in typeOptions" :key="item.value" @click="checkedChange(item, 'filter_type', 4)">{{ item.label }}</span>
					</div>
				</div>
				<!-- 认证类型 -->
				<div class="card">
					<div class="title">认证类型<span class="subtitle">多选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.verified_type.includes(item.value) && 'on'" v-for="item in verifiedOptions" :key="item.value" @click="checkedChange(item, 'verified_type', 3)">{{ item.label }}</span>
					</div>
				</div>
				<!-- 信源范围 -->
				<div class="card">
					<div class="title">信源范围<span class="subtitle">多选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.filter_lv_name.includes(item.value) && 'on'" v-for="item in lvOptions" :key="item.value" @click="checkedChange(item, 'filter_lv_name', 3)">{{ item.label }}</span>
					</div>
				</div>
				<!-- 图片识别 -->
				<div class="card">
					<div class="title">图片识别<span class="subtitle">单选</span></div>
					<div class="vals flex">
						<span class="val ocr-val" :class="params.filter_ocr==item.value && 'on'" v-for="item in ocrOptions" :key="item.value" @click="radioChange(item,'filter_ocr')">{{ item.label }}</span>
					</div>
				</div>
				<!-- 噪音过滤 -->
				<div class="card">
					<div class="title noise-title flex">
						<div>噪音过滤<span class="subtitle">单选</span></div>
						<div class="setting flex" @click="isNoise=true">
							<span>精准设置</span>
							<u-icon class="icon" name="setting" size="32"></u-icon>
						</div>
					</div>
					<div class="vals flex">
						<span class="val" :class="params.filter_noise==item.value && 'on'" v-for="item in noiseOptions" :key="item.value" @click="radioChange(item,'filter_noise')">{{ item.label }}</span>
					</div>
				</div>
				<!-- 相似信息 -->
				<div class="card">
					<div class="title">相似信息<span class="subtitle">单选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.filter_repeat==item.value && 'on'" v-for="item in repeatOptions" :key="item.value" @click="radioChange(item,'filter_repeat')">{{ item.label }}</span>
					</div>
				</div>
				<!-- 浏览范围 -->
				<div class="card">
					<div class="title">浏览范围<span class="subtitle">单选</span></div>
					<div class="vals flex">
						<span class="val" :class="params.browse_range==item.value && 'on'" v-for="item in browseOptions" :key="item.value" @click="radioChange(item,'browse_range')">{{ item.label }}</span>
					</div>
				</div>
				<!-- 地域匹配 -->
				<div class="card">
					<div class="title">地域匹配<span class="subtitle">多选</span></div>
					<div class="vals flex">
						<span class="val ocr-val" :class="params.filter_area_type.includes(item.value) && 'on'" v-for="item in areaTypeOptions" :key="item.value" @click="checkedChange(item, 'filter_area_type', 4)">{{ item.label }}</span>
					</div>
				</div>

			</scroll-view>
			<div class="btns flex" v-show="!startTime && !endTime">
				<u-button class="btn" type="error" @click="isDel=true" v-if="pathName != 'globallist'">删除</u-button>
				<u-button class="btn" type="success" @click="save" v-if="pathName != 'globallist'">应用并保存</u-button>
				<u-button class="btn" type="info" @click="reset">重置</u-button>
				<u-button class="btn" type="primary" @click="apply">应用</u-button>
			</div>
		</u-popup>
		<u-toast ref="uToast" />
		<u-modal v-model="isDel" title="删除" :title-style="{fontWeight: 'bold'}" content="确认删除？" @confirm="delConfirm" ref="uModal" :show-cancel-button="true" :async-close="true"></u-modal>
	
		<u-popup v-model="isNoise" mode="bottom" border-radius="30" height="80%">
			<div class="top flex">
        <u-icon class="icon" name="arrow-down" size="32" @click="isNoise=false"></u-icon>
				<span class="title">精准设置</span>
				<span class="confirm" @click="noiseConfirm">确定</span>
      </div>
			<div class="content">
				<div class="row flex">
					<u-radio-group>
						<u-radio shape="square">词距范围</u-radio>
					</u-radio-group>
					<u-number-box v-model="noiseConfig.word_spacing"></u-number-box>
				</div>
				<div class="row flex">
					<u-radio-group>
						<u-radio shape="square">品牌词首现位置</u-radio>
					</u-radio-group>
					<u-number-box v-model="noiseConfig.brand_pos"></u-number-box>
				</div>
				<div class="row flex">
					<u-checkbox-group>
						<u-checkbox v-model="noiseConfig.only_title">仅标题匹配</u-checkbox>
					</u-checkbox-group>
				</div>
				<div class="row flex">
					<u-checkbox-group>
						<u-checkbox v-model="noiseConfig.unique_area">唯一地域</u-checkbox>
					</u-checkbox-group>
				</div>
				<div class="row flex">
					<u-checkbox-group>
						<u-checkbox v-model="noiseConfig.wb_time_point">微博时间点过滤</u-checkbox>
					</u-checkbox-group>
				</div>
				<div class="row flex">
					<u-checkbox-group>
						<u-checkbox v-model="noiseConfig.ignore_wb_location">忽略微博位置中的关键词</u-checkbox>
					</u-checkbox-group>
				</div>
				<div class="row flex">
					<u-checkbox-group>
						<u-checkbox v-model="noiseConfig.ignore_wb_hashtag">忽略微博话题中的关键词</u-checkbox>
					</u-checkbox-group>
				</div>
				<div class="row flex">
					<u-checkbox-group>
						<u-checkbox v-model="noiseConfig.ignore_wb_mentions">忽略微博@中的关键词</u-checkbox>
					</u-checkbox-group>
				</div>
			</div>
		</u-popup>

		<u-popup v-model="isAdd" mode="bottom" border-radius="30" height="40%">
			<div class="top flex">
        <u-icon class="icon" name="arrow-down" size="32" @click="isAdd=false"></u-icon>
				<span class="title">保存</span>
				<span class="confirm" @click="saveConfirm" v-if="addTagIndex!=-1">确定</span>
				<span class="confirm disabled" v-else>确定</span>
      </div>
			<div class="content">
				<div class="title">已经保存的标签<span class="subtitle">选择以下标签可进行条件替换</span></div>
				<div class="vals flex">
					<span class="val" :class="addTagIndex==index && 'on'" v-for="(item, index) in filters" :key="index" @click="addTagSwitch(index)">
						{{ item.filter_title }}
					</span>
				</div>
			</div>
			<div class="input-box" v-if="!isAddInput">
				<u-button class="btn" type="primary" @click="isAddInput=true">添加标签</u-button>
			</div>
			<div class="input-box flex" v-else>
				<u-input v-model="newTagvalue" type="text" :border="true" />
				<u-button class="btn" type="primary" @click="addTagSubmit">添加</u-button>
			</div>
		</u-popup>
	</div>
</template>

<script>
import { mapState } from "vuex";
import { delAlias, articleList, mediaCount } from "@/api/subject.js";
import { warnList } from "@/api/warn.js";
import { getFilterTime } from "@/common/tool.js";

export default {
	props: {
		flag: {
			type: String,
			default: "home"
		},
		filters: {
			type: Array,
			default: []
		},
	},
	data() {
		return {
			tagIndex: 0,
			pathName: "",
			timeOptions: [
				{ label: "全部", value: 0 },
				{ label: "当天", value: 1 },
				{ label: "昨天", value: 2 },
				{ label: "24小时", value: 3 },
				{ label: "近3天", value: 4 },
				{ label: "近7天", value: 5 },
				{ label: "自定义时间", value: 6 },
			],
			tendOptions: [
				{ label: "全部", value: 0 },
				{ label: "正面", value: 1 },
				{ label: "中性", value: 2 },
				{ label: "负面", value: 3 },
			],
			mediaOptions: [
				{ label: "全部", value: 0 },
				{ label: "新闻", value: "01" },
				{ label: "平媒", value: "0105" },
				{ label: "论坛", value: "02" },
				{ label: "博客", value: "03" },
				{ label: "微博", value: "04" },
				{ label: "新浪微博", value: "0401" },
				{ label: "微信", value: "06" },
				{ label: "视频", value: "07" },
				{ label: "长微博", value: "0408" },
				{ label: "APP", value: "0109" },
				{ label: "短视频", value: "11" },
			],
			channelOptions: [
				{ label: "抖音", value: "抖音" },
				{ label: "快手", value: "快手" },
				{ label: "小红书", value: "小红书" },
				{ label: "bilibili", value: "bilibili" },
				{ label: "今日头条", value: "今日头条" },
				{ label: "腾讯新闻", value: "腾讯新闻" },
				{ label: "新浪新闻", value: "新浪新闻" },
				{ label: "搜狐新闻", value: "搜狐新闻" },
				{ label: "凤凰网", value: "凤凰网" },
				{ label: "网易新闻", value: "网易新闻" },
			],
			typeOptions: [
				{ label: "全部", value: 0 },
				{ label: "原创", value: 1 },
				{ label: "转发", value: 2 },
				{ label: "评论", value: 7 },
				{ label: "弹幕", value: 8 },
			],
			verifiedOptions: [
				{ label: "全部", value: 0 },
				{ label: "普通用户", value: 1 },
				{ label: "个人认证", value: 2 },
				{ label: "机构认证", value: 3 },
			],
			lvOptions: [
				{ label: "全部", value: 0 },
				{ label: "中央级", value: "A" },
				{ label: "省级", value: "B" },
				{ label: "地方", value: "C" },
			],
			ocrOptions: [
				{ label: "全部", value: 0 },
				{ label: "排除图片识别", value: "f" },
				{ label: "仅看图片识别", value: "t" },
			],
			noiseOptions: [
				{ label: "全部", value: 0 },
				{ label: "正常", value: 1 },
				{ label: "精准", value: 2 },
				{ label: "过滤", value: 3 },
			],
			repeatOptions: [
				{ label: "去重", value: "t" },
				{ label: "不去重", value: "f" },
			],
			browseOptions: [
				{ label: "全部", value: 0 },
				{ label: "已读", value: "t" },
				{ label: "未读", value: "f" },
			],
			areaTypeOptions: [
				{ label: "全部", value: 0 },
				{ label: "作者签到区域", value: "place" },
				{ label: "作者地域", value: "location" },
				{ label: "信息发布地域", value: "ip_region" },
				{ label: "内容包含地域", value: "find_address" },
			],
			startTime: false,
			endTime: false,
			timeparams: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false
			},
			params: {
				filter_id: "",
				filter_title: "",
				filter_save: "f",
				date_type: 0,
				date_time: [],
				sentiment: [0],
				filter_media: [0],
				filter_channel: [],
				filter_type: [0],
				verified_type: [0],
				filter_lv_name: [0],
				filter_ocr: 0,
				tags: [],
				filter_noise: 0,
				filter_repeat: "f",
				browse_range: 0,
				filter_area_type: [0],
				filter_area: [],
			},
			params_tmp: {},
			isDel: false,

			isNoise: false,
			noiseConfig: {
				word_spacing: 50,
				brand_pos: 100,
				only_title: false,
				unique_area: true,
				wb_time_point: false,
				ignore_wb_location: false,
				ignore_wb_hashtag: false,
				ignore_wb_mentions: false,
			},

			isAdd: false,
			addTagIndex: -1,
			newTagvalue: "",
			isAddInput: false,
		}
	},
	computed: {
		...mapState(["mediaCount"]),
		show: {
			get() {
				if(this.$store.state.isFilter && !! this.filters.length){
					this.tagSwitch(0);
				}
				return this.$store.state.isFilter;
			},
			set(value) {
				if(value){
					this.getMediaCount();
				}
				this.$store.state.isFilter = value;
			}
		},
	},
	created() {
		this.pathName = getCurrentPages().pop().route.split("/")[2];
	},
	methods: {
		getMediaCount() {
			let queryParams = {};
			if(this.pathName == "globallist"){
				queryParams = {
					...this.$store.state.listParams,
					...this.searchParams,
					id:	[]
				};
			}else{
				queryParams = {
					...this.$store.state.listParams,
					...this.$store.state.filterParams,
					...this.searchParams,
					id:!this.$store.state.subjects.length?[]:[this.$store.state.subjects[0].id]
				};
			}
			mediaCount(queryParams).then(({data})=>{
				this.$store.state.mediaCount = data;
			});
		},
		tagSwitch(index){
			this.tagIndex = index;
			this.params = this.filters[index];
			this.params_tmp = {...this.filters[index]};
		},
		cancel() {
			this.$store.state.isFilter = false;
			setTimeout(()=>{
				uni.showTabBar();
			},250);
		},
		startTimeConfirm(e) {
			this.params.date_time[0] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:00`;
		},
		endTimeConfirm(e) {
			this.params.date_time[1] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:00`;
		},
		radioChange(row, key) {
			this.params[key] = row.value;
		},
		checkedChange(row, key, len) {
			if(this.params[key].includes(0)){
				let tmp = this.params[key].filter(item=>item!=0);
				if(this.params[key].includes(row.value)){
					this.params[key] = tmp.filter(item=>item!=row.value);
				}else{
					this.params[key] = [...tmp, row.value];
				}
			}else{
				if(row.value == 0){
					this.params[key] = [0];
					return;
				}
				if(this.params[key].includes(row.value)){
					this.params[key] = this.params[key].filter(item=>item!=row.value);
				}else{
					this.params[key] = [...this.params[key], row.value];
					if(this.params[key].length == len) this.params[key] = [0];
				}
			}
		},
		save() {
			this.isAdd = true;
			this.isAddInput = false;
		},
		addTagSwitch(index) {
			this.addTagIndex = this.addTagIndex==index ? -1 : index;
		},
		reset() {
			this.params = {...this.params_tmp};
		},
		apply() {
			if(this.params.date_type != 6) this.params.date_time = getFilterTime(this.params.date_type);
			this.$store.state.filterParams = this.params;
			this.$store.state.isFilter = false;
			this.$store.commit("isRefreshAllListHandle", new Date().getTime());
			this.$store.commit("isRefreshImgListHandle", new Date().getTime());
			this.$store.commit("isRefreshVideoListHandle", new Date().getTime());
		},
		delConfirm() {
			delAlias({id: this.filters[this.tagIndex].id}).then(({code})=>{
				this.$refs.uModal.clearLoading();
				if(code == 200){
					this.$parent.init();
				}
			});
		},
		noiseConfirm() {
			let tmp = {...this.noiseConfig};
			Object.keys(tmp).map(key=>{
				if(tmp[key] === true){
					tmp[key] = "t";
				}else if(tmp[key] === false){
					tmp[key] = "f";
				}
			});
			this.params = {...this.params, ...tmp};
		},
		saveConfirm() {
			this.saveFilter("update");
		},
		addTagSubmit() {
			if(!this.newTagvalue.length){
				this.$refs.uToast.show({
					title: "名称不能为空",
					type: "error",
				});
			}else{
				this.saveFilter("add");
			}
		},
		saveFilter(type) {
			let tagPrams = null;
			tagPrams = {
				filter_id: type=="add" ? undefined : this.filters[this.addTagIndex].id,
				filter_title: type=="add" ? this.newTagvalue : this.filters[this.addTagIndex].filter_title,
				filter_save: "t",
				tag_type: !this.$store.state.subjects.length ? 1 : (this.$store.state.subjects[0]==0 ? 2 : 3),
				tag_id: !this.$store.state.subjects.length ? 0 : this.$store.state.subjects[0].id
			};
			if(this.flag == "home"){
				articleList({...this.params,type:1,...tagPrams}).then(({code})=>{
					if(code == 200){
						this.$refs.uToast.show({
							title: "操作成功",
							type: "success",
						});
						this.isAdd = false;
						this.$store.state.isFilter = false;
						this.$parent.init();
					}
				});
			}else if(this.flag == "warn"){
				warnList({...this.params,type:2,...tagPrams}).then(({code})=>{
					if(code == 200){
						this.$refs.uToast.show({
							title: "操作成功",
							type: "success",
						});
						this.isAdd = false;
						this.$store.state.isFilter = false;
						this.$parent.init();
					}
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.top{
  font-size: 36rpx;
  font-weight: bold;
  padding: 20rpx;
	box-sizing: border-box;
	background-color: #fff;
  border-bottom: 1rpx solid #F0F0F0;
  justify-content: space-between;
  align-items: center;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
  .icon{
    cursor: pointer;
		padding: 10rpx;
  }
	.tags{
		width: 600rpx;
		overflow-x: auto;
		margin-right: 20rpx;
		.tags-box{
			width: max-content;
		}
		.tag{
			font-size: 30rpx;
			font-weight: normal;
			margin: 0 10rpx;
		}
		.on{
			color: #1E62FC;
			font-weight: bold;
		}
	}
	.confirm{
    cursor: pointer;
    font-size: 32rpx;
    color: #1E62FC;
  }
	.disabled{
		opacity: 0.6;
	}
}
.btns{
	padding: 20rpx;
	justify-content: flex-end;
	box-sizing: border-box;
	box-shadow: 0rpx -6rpx 30rpx 0rpx rgba(192, 192, 192, 0.3);
	background-color: #fff;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	.btn{
		margin: 0;
		margin-left: 20rpx;
	}
}

.content{
	padding: 20rpx;
	box-sizing: border-box;
	height: calc(100% - 200rpx);
	position: fixed;
	width: 100%;
	top: 70rpx;
	left: 0;
	.card{
		margin-top: 20rpx;
	}
	.title{
		font-size: 32rpx;
		color: #666;
		.subtitle{
			font-size: 28rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
	.noise-title{
		justify-content: space-between;
		align-items: flex-end;
		.setting{
			font-size: 28rpx;
			align-items: center;
		}
	}
	.vals{
		flex-wrap: wrap;

		.val{
			width: 160rpx;
			padding: 20rpx 0;
			border-radius: 10rpx;
			box-sizing: border-box;
			border: 1rpx solid #F0F0F0;
			text-align: center;
			margin-left: 20rpx;
			margin-top: 20rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			&:nth-child(1),&:nth-child(5),&:nth-child(9){
				margin-left: 0;
			}
		}

		.on{
			border: 1rpx solid #1E62FC;
			background-color: #1E62FC;
			color: #fff;
		}
		.w100{
			width: 100%;
			margin-left: 0;
		}
		.w50{
			width: 48%;
			margin: 0;
		}
		.ocr-val{
			min-width: 160rpx;
			width: max-content;
			padding: 20rpx;

			&:nth-child(4){
				margin-left: 0;
			}
			&:nth-child(5){
				margin-left: 20rpx;
			}
		}
	}
	.timepicker{
		align-items: center;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin-top: 20rpx;
	}
}
.row{
	margin: 20rpx;
	justify-content: space-between;
}
.input-box{
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 20rpx;
	background-color: #fff;
	box-sizing: border-box;
	.btn{
		margin-left: 10rpx;
	}
}

</style>